<template>
	<view class="g-tabs">
		<view class="g-tabs-scroll-wrap">
			<scroll-view scroll-x  :scroll-left="scrollLeft"  scroll-with-animation  @scroll="scroll_x">
					<view class="scroll">
						<view class="tabs-sub" v-for="(item,index) in list" @click="clickTitle(item,index)" :id="'tabItem'+index">
							<view class="tabs-sub-title"
								:class="index==activeIndex&&'tabs-sub-title-choiced'" 
								:style="{'color':index==activeIndex?textColor:'#0D0D0D'}">
									{{item.label}}
							</view>
							<view class="tabs-sub-under-line"
								 v-if="index==activeIndex" 
								:style="{'background':index==activeIndex&&lineColor}">
							</view>
						</view>	
					</view>
			</scroll-view>
		</view>
		<view class="g-tabs-slot" 
			:style="{'width':slotWidth+'px'}">
			<slot name="expand"></slot>
		</view>
	</view>
</template>

<script>
	/*
	 * prop {Array} list tab显示的项列表 {label:xxx}
	 * prop {Number} defaultIndex  默认选中的项，默认值为第一项 
	 * prop {String} lineColor 下划线颜色
	 * slot {name:expand} 拓展组件，在tab右边开拓一个区域
	 * @Event {Function} handleClick 点击每一项的事件，暴露出选中的项目 {value:Objec,index:index}
	 */
	export default {
		name: 'g-tabs',
		data() {
			return {
				activeIndex:0,
				scrollLeft:0,
				lineNowPosition:0,
				nowScroll:0,
				maxScrollX:0
			};
		},
		props: {
			//数据源
			
			list:{
				type:Array
			},
			//tab的banner颜色
			lineColor:{
				default:"#409EFF",
				type:String
			},
			//文字颜色
			textColor:{
				default:"#22222",
				type:String
			},
			//默认选中位置
			defaultIndex:{
				default:0,
				type:Number
			},
			//插槽宽度
			slotWidth:{
				default:0,
				type:String
			}
		},
		computed: {
		},
		methods: {
			scroll_x(e){
				//滚动的时候给scrollLeft赋值,避免滚动位置与预期不符
				let _this = this
				this.scrollLeft = e.detail.scrollLeft
				//获取能滚动的最大宽度
				this.maxScrollX==0&&(uni.getSystemInfo({
					    success: function(res){
					       _this.maxScrollX =e.detail.scrollWidth - res.screenWidth + Number(_this.slotWidth)
					    }
					}));
			},
			getScrollLeft(index){
				/*
					设置滚动条位置
				*/
				
				//监听滚动条边界，防止一直加减到无穷
				if(this.scrollLeft >=this.maxScrollX&&this.maxScrollX!=0){
					this.scrollLeft = this.maxScrollX
				}else if(this.scrollLeft<=0){
					this.scrollLeft = 0
				}
				
				//获取设备与节点信息
				let useAbleWidth,nodeLeft,nodeWidth
				uni.getSystemInfo({
				    success: function (res) {
				        useAbleWidth = res.windowWidth
				    }
				});
				uni.createSelectorQuery(this).select(`#tabItem${index}`).boundingClientRect(infor=>{
					nodeLeft = infor.left 
					nodeWidth = infor.width 
				}).exec()
				if(useAbleWidth-this.slotWidth-nodeWidth-nodeLeft<=nodeWidth*1.5){
					//当点击的节点位置： 可用宽度-插槽宽度-节点宽度-节点距左宽度<50的时候触发滚动
					this.scrollLeft+=nodeWidth*2
				}else if(nodeLeft<=nodeWidth*1.5){
					//只监听距左位置
					this.scrollLeft-=nodeWidth*2
				}
				
				
			},
			clickTitle(item,index){
				/*
					向父组件传递参数
				*/
				this.activeIndex = index
				let details = {
					value:item,
					index:index
				}
				this.getScrollLeft(index)
				this.$emit('handleClick',details)
			},
			init(){
				//初始值的位置
				if(this.defaultIndex!=0){
					this.activeIndex = this.defaultIndex
				}
			},
			
		},
		watch:{
		},
		created() {
			this.init()
		}
	};
</script>
<style scoped lang="scss">
	@import "../../theme.scss";
	scroll-view ::v-deep ::-webkit-scrollbar {
	  display: none;
	  width: 0 !important;
	  height: 0 !important;
	  -webkit-appearance: none;
	  background: transparent;
	}
	.g-tabs{
		width: 100%;
		display: flex;
		color: #0D0D0D;
		align-items: center;
		z-index: 11;
		overflow: auto hidden;
		&-scroll-wrap{
			width:0!important;
			flex: 1;
		}
	}
	.scroll {
		display: flex;
	}
	.tabs-sub {
		position: relative;
		min-width: 100rpx;
		height: 84rpx;
		&-title{
			line-height: 80rpx;
			font-size: 28rpx;
			color:$g-text-darker ;
			text-align: center;
			&-choiced{
				font-weight: bold;
				font-size: 28rpx;
				font-size: 32rpx;
				color: #222222;
			}
		}
		&-under-line{
			position: absolute;
			bottom: 0;
			background: red;
			width: 24rpx;
			height: 4rpx;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 2rpx;
		}
	}
</style>
